<template>
	<!-- 退单页面 -->
	<view class="upd"  v-if="list.orderBase">
		<!-- 商品信息 -->
		<view class="retlist" >
			<view class="top">
				订单编号:{{list.orderBase.orderSn}}
			</view>
			<view class="center" v-for="item in list.orderItems">
				<image :src="item.productPic" mode=""></image>
				<view class="right">
					<view class="ritop">
						<text>{{item.productName}}</text>
						<text>￥{{item.realAmount}}</text>
					</view>
					<view class="ricenter">
						<text>编号: {{item.productSn}}</text>
						<text>x{{item.productQuantity}}</text>
					</view>
					<view v-for="arr in item.productAttr" class="riattr">
						{{arr.key}}: {{arr.value}}
					</view>
				</view>
			</view>
			<view class="btm returnApply">
				合计:{{list.orderBase.totalAmount}}
			</view>
		</view>
		<!-- 退单信息 -->
		<view class="retApply">
			<view class="num">
				请选择退款数量: <text>{{list.orderItems[0].productQuantity}}</text>
			</view>
			<view class="reason">
				请输入退款原因: <input type="text" v-model="reason" placeholder="请输入退款原因" />
			</view>
			<view class="city">
				请选择退货地址:
				<view class="uni-list" >
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<picker mode="selector" @change="bindPickerChange" :value="index" :range="array">
								<view class="uni-input">{{ index == "" ? "请选择退货地址" : companyList[index].addressName}}</view>
							</picker>
						</view>
					</view>
				</view>
		
			</view>
			<view class="ms">
				<text>请输入问题描述:</text>
				<textarea v-model="description" placeholder="请输入问题描述" />
			</view>
			<view class="btm">
				<text style="font-weight: 600;">
					温馨提示:
				</text>
				<text class="title">
					上传图片总大小不能超过3m，单个文件大小不能超过1m，图片总个数不能超过3张
				</text>
				<view class="imgList" @tap='upload'>
					<view class="imgUplod">
						<uni-icons type="plusempty" size="30"></uni-icons>
						<text>上传图片</text>
					</view>
					<view class="img">
						<image v-for="item in imgList" :src="item.path" mode="">
							<!-- <uni-icons type="close" size="10" color="red"></uni-icons> -->
						</image> 
					</view>
				</view>
			</view>
		</view>
		<view class="btn" @tap='uploadApply'>
			提交
		</view>
		<view class="d">
		
		</view>
		
	</view>
</template>

<script>
	import {
		getPreOrderById
	} from "@/api/selectAddress/index.js"
	import {
		getCompanyAddrss,
		addOrderReturnApply
	} from "@/api/user/order/index.js"
	import baseurl from"@/api/baseurl.js"
	export default {
		data() {
			return {
			
				reason:"",//退货原因
				description:"",//请描述问题
				index: 0,
				array: ["请选择退货地址"],
				companyList: [],
				imgList:[] ,//图片
				skuid:"",
				list:{},
			};
		},
		methods:{
			// 获取存到本地的数据
			// init(){
			//  	this.list = uni.getStorageSync("reList")
				
			// },
			
			init(all){
				// console.log(all);
				getPreOrderById(all)
				.then(res =>{
					// console.log(res);
					// this.list = res.data.orderItems	
					// 	console.log(this.list);
					res.data.orderItems.forEach(ele =>{
						ele.productAttr = JSON.parse(ele.productAttr)
					});
					var result = res.data.orderItems.find(ele =>ele.id == this.skuid);
					res.data.orderItems = [result];
					this.list = res.data;
					console.log(this.list);
						
				})
			},
			// 下拉框
			bindPickerChange: function(e) {
				this.index = e.target.value
				console.log("下拉框",e.detail.value)
			},
			//上传图片
			upload() {
				var _this = this
				uni.chooseImage({
					success(res) {
						// console.log(res)
						// 图片长度
						var result = res.tempFiles
						if (res.tempFiles.length > 3) {
							uni.showToast({
								title: "选择图片超出",
								icon: "none"
							})
							return
						}
						//判断图片的大小
						var item = result.find(el => el.size > 1048576)
						if (item) {
							uni.showToast({
								title: "图片大于1m,请重新选择",
								icon: "none"
							})
							return
						}
						// 判断图片不可以大于3张
						if (res.tempFiles.length + _this.imgList.length > 3) {
							uni.showToast({
								title: "图片总数量超出三张",
								icon: "none"
							})
							return
						}
						//push进去
						_this.imgList.push(...result)
					console.log("图片",_this.imgList)
					}
				})
			},
			
			// 点击确定上传
			uploadApply(){
				// 图片上传
				var arr= []
				this.imgList.forEach(ele=>{
					// 解决异步Promise
					var pro = new Promise((resolve,rejected) =>{
						// 因为接口一次只可以发送一张图片 可以循环发送多次请求上传图片
						uni.uploadFile({
							url: baseurl + "/lejuClient/orderReturn/uploadImg",
							filePath: ele.path,  //图片路径
							name:"file",
							success(res) {
								console.log("图片请求上传",res);
								// 把路结果给arr   因为加了Promise所以res就是opj把实例塞入到数组中
								// arr.push(res)
								resolve(res)
								
							}
						})
						
					})
					arr.push(pro)
				})
				const p = Promise.all(arr) //	因为用了Promise 提交了三次有三个Promise所以用 Promise.all
				p.then(res =>{
					console.log(res);
					var path = res.map(ele =>JSON.parse(ele.data).data.fileUrl).join(",");
					// console.log(path);
					
					// 提交退货
					// console.log("ididi",this.city[this.index].id);
					addOrderReturnApply({
						"companyAddressId": this.companyList[this.index].id,
						"count": this.list.orderItems[0].productQuantity,
						"description": this.description,
						"orderId": this.list.orderBase.id,
						"orderItemId": this.list.orderItems[0].id,
						"proofPics": path,
						"reason": this.reason
						
					}).then(res =>{
						console.log("点击上传退单详情",res);
						if(res.success){
							uni.showToast({
								title:"已申请退款",
								icon:"none"
							})
							setTimeout(function(){
								uni.navigateTo({
									url:"/pages/user/order/order?type=2"
								})
							},500)
						} else{
							uni.showToast({
								title:res.message,
								icon:"none"
							})
						}
					})
					
				})
				// console.log("用了Promise",arr);
				
			}
		},
		onShow() {

		},
		onLoad(all) {
			console.log(all);
		this.init(all.id)
		this.skuid = all.skuid

			getCompanyAddrss()
			.then(res=>{
				console.log("退货地址",res);
				this.array.push(...res.data.items.map(el => el.addressName))
				this.companyList = res.data.items
			})
		}
		
		
		
	}
</script>

<style lang="scss" scoped>
	.upd {
		.retlist {
			width: 80%;
			padding: 30rpx;
			margin: 0 auto;
			margin-top: 60rpx;
			background-color: #ffff;
			border-radius: 15rpx;
	
			.top {
				border-bottom: 1rpx solid #d3d3d3;
				font-size: 24rpx;
				display: flex;
				padding: 0rpx 0 20rpx 0;
				justify-content: space-between;
				color: #3e3e3e;
			}
	
			image {
				width: 180rpx;
				height: 180rpx;
			}
	
			.center {
				display: flex;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #d3d3d3;
	
				image {
					width: 160rpx;
					height: 160rpx;
				}
	
				.right {
					display: flex;
					flex-direction: column;
					margin-left: 25rpx;
					// padding: 0 10px ;
					width: 80%;
	
					.ritop {
						font-size: 26rpx;
						margin-bottom: 10rpx;
						display: flex;
						justify-content: space-between;
					}
	
					.ricenter {
						font-size: 24rpx;
						color: #8d8d8d;
						display: flex;
						justify-content: space-between;
					}
	
					.riattr {
						font-size: 24rpx;
						color: #8d8d8d;
					}
	
				}
			}
	
			.returnApply {
				text-align: right;
				font-size: 26rpx;
				color: #8d8d8d;
				margin-top: 20rpx;
			}
	
		}
	
		.btn {
			width: 75%;
			height: 80rpx;
			background-color: #354e44;
			color: #fff;
			line-height: 80rpx;
			margin: 0 auto;
			margin-top: 50rpx;
			text-align: center;
			border-radius: 10rpx;
	
		}
	
		.retApply {
			width: 80%;
			padding: 30rpx;
			margin: 0 auto;
			margin-top: 40rpx;
			background-color: #ffff;
			border-radius: 15rpx;
	
			view {
				display: flex;
				justify-content: space-between;
				font-size: 26rpx;
	
				input {
					text-align: right;
					// color:#a3a3a3;
					font-size: 26rpx;
	
				}
			}
	
			.num {
				justify-content: space-between;
	
				text {
					color: #a3a3a3;
				}
	
				margin-bottom: 30rpx;
			}
	
			.reason {
				margin-bottom: 30rpx;
			}
	
			.ms {
				margin-top: 30rpx;
	
				textarea {
					text-align: right;
					width: 50%;
					font-size: 26rpx;
				}
			}
	
			.btm {
				display: flex;
				flex-direction: column;
	
				.title {
					font-size: 24rpx;
					color: #333;
				}
	
				.imgList {
					padding: 20rpx;
					justify-content: flex-start;
					.imgUplod {
						margin-top: 20rpx;
						display: flex;
						    flex-direction: column;
					}
					.img{
						width:70%;
						margin-left: 20rpx;
						image{
						width:120rpx;
						height:120rpx;
						}
					}
				}
	
			}
		}
	
		.d {
			height: 100rpx;
		}
	}

</style>
